<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="userContent">
      <edoovo-table
        ref="multipleTable"
        :data="tableData"
        title="列表"
        subtitle="哈哈"
        tooltip-effect="dark"
        style="width: 100%"
        default-value="-"
        rowKey="id"
        class="list-tableBox"
      >
        <edoovo-table-column
          size="XL"
          label="Lesson name"
          class="id"
          prop="name"
          sortName="name"
          :tooltip="true"
          @click="() => {}"
        />
        <!-- ======= -->
        <!-- 分页组件 -->
        <!-- ======= -->
        <edoovo-pagination
          slot="pagination"
          @size-change="_pageSizeChange"
          @current-change="_pageChange"
          :current-page="pageNumber"
          :page-size="pageSize"
          :total="totalNum"
        />
      </edoovo-table>
    </div>
  </div>
</template>
<script>
import EdoovoTable from "@/components/edoovo-components/Table/Table.vue";
import EdoovoTableColumn from "@/components/edoovo-components/Table/TableColumn";

import { Ajax } from "@/common";
export default {
  name: "about",
  data() {
    return {
      tableData: [
        {
          id: "5f7c9c02672f402a05501de2",
          name: "Hi! English - Small Class",
          type: "STANDARD",
          ageGroupName: "Preschool",
          subjectName: "English",
          courseName: "Preschool English",
          classSize: 1,
          duration: 45,
          symbol: "S$",
          creditNumber: 1,
          price: 20,
          canDelete: false,
        },
      ],
      pageNumber: 1,
      pageSize: 20,
      totalNum: 4,
      sort: { name: undefined, type: undefined },
    };
  },
  components: {},
  created() {
    let arr = [
      {
        role: "student",
        isPermission: true,
        img: "图标",
        type: [
          {
            key: "a",
            value: "aa",
          },
          {
            key: "b",
            value: "bb",
          },
        ],
      },
    ];
    this._getData();
  },

  methods: {
    _getData() {
      // Ajax.get("edoovo/data-service/user/notification/findAll").then((res) => {
      //   console.log(res);
      // });
    },
    _pageChange(val) {
      this.pageNumber = val;
      this._getData();
    },
    _pageSizeChange(val) {

      this.pageSize = val;
      this._getData();
    },
  },
};
</script>
<style lang="stylus" scoped>
h1 {
  font: 20px;
  height: 50px;
  background-color: red;
}
</style>
